<template>
	<public-view navType="secondCar" navTitle="二手车">
		<view class="content flex f-d-c a-i-c">
			<view class="type-class-list flex f-d-c">
				<view class="top-title flex a-i-c">
					<view class="title f-s-28">
						精选品类
					</view>
					<view class="jingxian-tip flex a-i-c">
						<image class="bgimg" src="@/static/images/jingxuan.svg" mode=""></image>
						<view class="tuijian f-s-16 color-fff">
							为您推荐
						</view>
					</view>
				</view>
				<view class="class-box flex a-i-c j-c-b">
					<block v-for="(item, index) in lorry_class_list" :key="index">
						<view class="item flex f-d-c a-i-c" @click="changeClass(item)">
							<image class="ico" :src="item.image" mode=""></image>
							<view class="name-title all-center f-s-24">
								{{item.name || ""}}
							</view>
						</view>
					</block>
				</view>
			</view>
			<view class="type-tab-list flex a-i-c">
				<block v-for="(item, index) in tab_type_list" :key="index">
					<view class="item flex j-c-c" :class="type_id === item.id?'active':'unacitve'" @click="changeTypeID(item)">
						{{item.name}}
						<view class="bottom" v-if="type_id === item.id"></view>
					</view>
				</block>
			</view>
			<block v-for="(item, index) in car_list" :key="index">
				<view class="items-box flex a-i-c" @click="goToCarInfo(item)">
					<image class="good-icon" :src="item.images[0]" mode=""></image>
					<view class="good-info-box">
						<view class="name f-s-30 f-w-b">
							{{item.title||""}}
						</view>
						<view class="subtitle f-s-24 color-999">
							{{item.desc||""}}
						</view>
						<view class="bottom flex a-i-c j-c-b w-100">
							<view class="" style="color: #EE8300;">
								<text class="f-w-b" style="font-style: italic;">{{item.first_price||0}}-{{item.last_price||0}}</text><text class="f-s-22 f-w-4">万</text>
							</view>
							<view class="right all-center color-2567F3 f-s-24" style="white-space: nowrap;" @click.stop="$callPhone(item.mobile)">
								联系车主
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</public-view>
</template>

<script>
	import {goTo} from "@/nav.js"
	export default {
		data() {
			return {
				type_id:"1",
				tab_type_list:[
					{
						id:'1',
						name:"买车"
					},
					{
						id:'0',
						name:"卖车"
					}
				],
				lorry_class_list:[],
				car_list:[],
				class_id:""
			};
		},
		onShow() {
			this.getSecondCarClass()
			this.getSecondCarList()
			this.changeChoose(false)
		},
		computed:{
			keywords(){
				return this.$store.state.nav_keywords || ""
			}
		},
		watch:{
			"$store.state.nav_keywords"(nval,oval){
					this.getSecondCarList()
				}
		},
		onPullDownRefresh() {
			this.car_list = []
			this.getSecondCarList()
		},
		methods:{
			goTo,
			changeChoose(isload = true){
				this.$store.commit("changeSecondChooseInfo",{
					type:this.type_id,
					class_id:this.class_id
				})
				isload && this.goTo({url:'/pages/secondCar/secondCarClass'})
			},
			changeClass(item){
				this.class_id = item.id
				this.changeChoose()
			},
			goToCarInfo(item){
				// this.$store.commit("changeSecondCarInfo",JSON.stringify(item))
				this.goTo({url:'/pages/secondCar/secondCarInfo?id='+item.id})
			},
			getSecondCarList(){
				let that = this
				console.log("content/lorry")
				that.util.postRequest({
					url:"v1/content/lorry",
					data:{
						type:that.type_id,
						keyword:that.keywords
					}
				}).then(res=>{
					console.log(res,"content/lorry")
					that.car_list = res.data.data
					uni.stopPullDownRefresh()
				}).catch(e=>{
					uni.stopPullDownRefresh()
				})
			},
			getSecondCarClass(){
				let that = this
				that.util.getRequest({
					url:'v1/content/lorry_class',
				}).then(res=>{
					console.log(res)
					that.lorry_class_list = res.data
				})
			},
			changeTypeID(item){
				this.type_id = item.id
				this.getSecondCarList()
				// this.changeChoose()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.items-box{
		width: 100%;
		padding: 24upx;
		background: #FFFFFF;
		box-shadow: 0px 8upx 16upx rgba(0, 0, 0, 0.05);
		border-radius: 16upx;
		margin-bottom: 30upx;
		.good-info-box{
			width: 380upx;
			.bottom{
				// width: calc(100% - 224upx - 22upx - 24upx);
				.right{
					background: #F1F5FE;
					border: 1upx solid #2567F3;
					border-radius: 8upx;
					width: 104upx;
					height: 48upx;
				}
			}
			.subtitle{
				line-height: 34upx;
				margin-bottom: 8upx;
			}
			.name{
				line-height: 42upx;
				margin-bottom: 4upx;
			}
		}
		.good-icon{
			width: 224upx;
			height: 168upx;
			margin-right: 22upx;
		}
	}
	.type-tab-list{
		width: 100%;
		padding: 0 32upx;
		margin-bottom: 32upx;
		.item{
			position: relative;
			margin-right: 32upx;
			.bottom{
				width: 38upx;
				height: 4upx;
				background: #2567F3;
				position: absolute;
				bottom: -10upx;
				
			}
		}
		.active{
			line-height: 42upx;
			font-weight: bold;
			font-size: 30upx;
		}
		.unacitve{
			font-size: 28upx;
			color: #999999;
			line-height: 40upx;
		}
	}
	.type-class-list{
		width: 100%;
		background: linear-gradient(180deg, #FFFFFF 0%, #F5FBFF 100%);
		border-radius: 24upx;
		padding: 26upx 32upx;
		margin-bottom: 30upx;
		.class-box{
			width: 100%;
			.item{
				.ico{
					width: 88upx;
					height: 88upx;
					position: relative;
					z-index: 1;
					border-radius: 50%;
				}
				.name-title{
					background: linear-gradient(90.23deg, #E3F2FF 0.18%, #F1F6FF 57.37%, #D7E0FF 100.92%);
					border-radius: 4upx;
					padding: 4upx 20upx;
					margin-top: -10upx;
					position: relative;
					z-index: 2;
				}
			}
		}
		.top-title{
			margin-bottom: 24upx;
			.jingxian-tip{
				width: 94upx;
				height: 28upx;
				position: relative;
				.tuijian{
					position: relative;
					z-index: 2;
					margin-left: 8upx;
				}
				.bgimg{
					width: 100%;
					height: 100%;
					position: absolute;
					z-index: 1;
					top: 0;
					left: 0;
				}
			}
			.title{
				margin-right: 14upx;
				line-height: 40upx;
			}
			
		}
	}
	.content{
		width: 750upx;
		padding: 18upx 24upx;
	}
</style>
